// 顶部
var toper_li = document.querySelectorAll(".toper_c li");
var toper_r_left_li = document.querySelectorAll(".toper_r_left div");
for (var i = 0; i < toper_li.length; i++) {

    toper_li[i].onmouseover = function () {
        for (var i = 0; i < toper_li.length; i++) {
            toper_li[i].className = ' ';

        }
        this.className = 'active';
        // var index = this.getAttribute("index");


    }
    toper_li[i].onmouseout = function () {
        for (var i = 0; i < toper_li.length; i++) {
            toper_li[i].className = '';
        }
    }

}
for (var i = 0; i < toper_r_left_li.length; i++) {
    toper_r_left_li[i].onmouseover = function () {
        for (var i = 0; i < toper_r_left_li.length; i++) {
            toper_r_left_li[i].className = '';
        }
        this.className = 'toper_r_left_active';
    }
    toper_r_left_li[i].onmouseout = function () {
        for (var i = 0; i < toper_r_left_li.length; i++) {
            toper_r_left_li[i].className = '';
        }
    }
}

var toper_c = document.querySelector('.toper_c');
var toper_r_left_list1 = document.getElementById("toper_r_left_list1");
var toperHide = document.querySelector('.toperHide');
var toperHide_input = document.querySelector('.toperHide input');
var toperHide_span = document.querySelector('.toperHide_span');
toperHide_span.onclick = function () {
    toper_c.style.display = 'block';
    toper_r_left_list1.style.display = 'block';
    toperHide.style.display = 'none';
}
toper_r_left_list1.onclick = function () {
    toper_c.style.display = 'none';
    toper_r_left_list1.style.display = 'none';
    toperHide.style.display = 'block';
    toperHide_input.focus();
}


// 轮播图
var rotationChart = document.getElementById("rotationChart");
var rotationChart_btn = document.querySelectorAll(".rotationChart span");
var timer = null;
var side_timer = null;
var index = 0;
var bennerContent = document.querySelector('.bennerList');
var bennerList = bennerContent.children;
rotationChart_btn[1].addEventListener('click',toPrev);
rotationChart_btn[0].addEventListener('click',toNext);
bennerContent.addEventListener('mouseover',stopMove);
bennerContent.addEventListener('mouseout',conMove);
function toNext(){
    clearInterval(side_timer);
    if(index === bennerList.length-1){
        index = 1;
        bennerContent.style.left = 0;
    }else{
        index++;
    } 
    move(bennerContent,"left",-index * 1380);
    side_timer = setInterval(toNext,2000);
}
function toPrev(){
    clearInterval(side_timer);
    if(index === 0){
        index = bennerList.length-2;
        bennerContent.style.left = -(bennerList.length - 1) * 1380 + "px";
    }else{
        index--;
    }
    move(bennerContent,"left",-index * 1380);
    side_timer = setInterval(toNext,2000);
}
function move(elemNode,attr,target){
    clearInterval(timer);
    timer = setInterval(function(){
        if(attr==='opacity'){
            var newStyle = getComputedStyle(elemNode)[attr]*100;
        }else{
            var newStyle = parseInt(getComputedStyle(elemNode)[attr]);
        }
        var speed = (target - newStyle) / 8;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        newStyle += speed;
        if(attr==='opacity'){
            elemNode.style[attr] = newStyle / 100;
        }else{
            elemNode.style[attr] = newStyle + 'px';
        }
        if(target === newStyle){
            clearInterval(timer);
        }
    },30)
    
}
side_timer = setInterval(toNext,2000);
function stopMove(){
    clearInterval(side_timer);
}
function conMove(){
    side_timer = setInterval(toNext,2000);
}
rotationChart.onmouseover = function () {
    clearInterval(timer);
    //按钮显示
    for (var i = 0; i < rotationChart_btn.length; i++) {

        //更换按钮背景
        rotationChart_btn[i].onmouseover = function () {
            this.className += ' rotationChart_active';
        }
        rotationChart_btn[i].style.display = 'block';
        (function () {
            var index = i;
            rotationChart_btn[index].onmouseout = function () {
                rotationChart_btn[index].className = removeClass(rotationChart_btn[index], 'rotationChart_active');
            }
        })()

    }
}
// 去掉classname
function removeClass(dom, className) {
    var classString = dom.className.split(" ");
    var index = classString.indexOf(className);
    if (index === -1) {
        return dom.className = classString.join(",").replace(',', ' ');
    } else {
        classString.splice(index, 1)
        return dom.className = classString.join(',').replace(',', ' ');
    }
}

// 广告位
var advertisementList = ["18.jpg", "19.jpg", "20.jpg", "21.jpg", "1.jpeg"];
var adv = document.getElementById("advertisement");

function toAdvertisementlist() {
    for (var i = 0; i < advertisementList.length; i++) {
        var div = document.createElement("div");
        var img = document.createElement("img");
        img.src = "images/" + advertisementList[i];
        div.appendChild(img);
        adv.appendChild(div);
    }
}
toAdvertisementlist();
//回到顶部
var BackTop = document.querySelector('.backTop');

window.onscroll = function () {
    var scrollTop = document.documentElement.scrollTop;
    if (scrollTop > 200) {
        BackTop.style.display = 'block';
    } else {
        BackTop.style.display = 'none';
    }
    if (scrollTop > 3480) {
        BackTop.style.bottom = 270 + 'px';
    } else {
        BackTop.style.bottom = 20 + 'px';
    }
}
BackTop.onclick = function () {
    document.documentElement.scrollTop = 0;
}

// 标题
var title = document.querySelectorAll(".title li");
for (var i = 0; i < title.length; i++) {
    title[i].onmouseover = function () {
        for (var i = 0; i < title.length; i++) {
            title[i].className = '';
        }
        this.className = 'title_active';
    }
    title[i].onmouseout = function () {
        for (var i = 0; i < title.length; i++) {
            title[i].className = '';
        }
    }
}

// 主要内容
var mainContent = '';
var mainContentList = document.querySelector('.mainContentList');
for (var i = 0; i < 40; i++) {
    mainContent += '<div class="mainContentDivList">' +
        '<img src="images/images/' + i + '.jpg" alt="......">' +
        '<div class="mainContentSmallDivList">' +
        '<div class="mainContentSmallDivList_t">' +
        '<p class="mainContentSmallDivList_t_title"><a href="#">设计大事件【2019年3月下】</a></p>' +
        '<p class="mainContentSmallDivList_t_content">文章-资讯-多领域</p>' +
        '<p class="mainContentSmallDivList_t_list">' +
        '<span class="mainContentSmallDivList_t_list1">1637</span>' +
        '<span class="mainContentSmallDivList_t_list2">12</span>' +
        '<span class="mainContentSmallDivList_t_list3">44</span>' +
        '</p>' +
        '</div>' +
        '<div class="mainContentSmallDivList_b">' +
        '<div class="mainContentSmallDivList_bl">' +
        '<img src="images/13.jpg" alt="......">' +
        '<a href="#">Fartiart</a>' +
        '<div class="mainContentSmallDivList_b_listhide">' +
        '<div class="avator_container">' +
        '<a href="#" title="Fartiart">' +
        '<img src="images/13.jpg" alt="...">' +
        '</a>' +
        '</div>' +
        '<div class="personal_info"><a href="#">桂文龙</a></div>' +
        '<div class="position_info">杭州&nbsp;|三维设计师</div>' +
        '<div class="info_num">' +
        '<div class="info_num_work">' +
        ' <p>创作</p>' +
        '<a href="#">1</a>' +
        '</div>' +
        '<div class="info_num_fans">' +
        '<p>粉丝</p>' +
        '<a href="#">369</a>' +
        '</div>' +
        '</div>' +
        '<div class="btn_area">' +
        '<button class="btn_area_list1">关注</button>' +
        ' <button class="btn_area_list2">私信</button>' +
        '</div>' +
        '</div>' +
        '</div>' +
        '<span>16小时</span>' +
        '</div>' +
        '</div>' +
        '</div>';
}
mainContentList.innerHTML = mainContent;
var mainContentSmallDivList_b_listhide = document.querySelectorAll('.mainContentSmallDivList_b_listhide');
var mainContentSmallDivList_bl = document.querySelectorAll('.mainContentSmallDivList_bl');
for (var i = 0; i < mainContentSmallDivList_bl.length; i++) {

    (function () {
        var index = i;
        mainContentSmallDivList_bl[index].onmouseover = function () {
            for (var i = 0; i < mainContentSmallDivList_b_listhide.length; i++) {
                mainContentSmallDivList_b_listhide[i].style.display = 'none';
            }
            mainContentSmallDivList_b_listhide[index].style.display = 'block';
        }
        mainContentSmallDivList_bl[index].onmouseout = function () {
            for (var i = 0; i < mainContentSmallDivList_b_listhide.length; i++) {
                mainContentSmallDivList_b_listhide[i].style.display = 'none';
            }
        }
    })()
}






var mainContentList_btn_first = document.querySelectorAll('.mainContentList_btn a');
for (var i = 0; i < mainContentList_btn_first.length; i++) {
    mainContentList_btn_first[i].onmouseover = function () {
        for (var i = 0; i < mainContentList_btn_first.length; i++) {
            mainContentList_btn_first[i].childElementCount.className = '';
        }
        this.className = 'mainContentList_btn_active';
    }
    mainContentList_btn_first[i].onmouseout = function () {
        for (var i = 0; i < mainContentList_btn_first.length; i++) {
            mainContentList_btn_first[i].className = ' ';
        }
    }
}


// 猜你喜欢
var like_content_b = document.querySelector('.like_content_b');
for (var i = 0; i < advertisementList.length; i++) {
    var div1 = document.createElement('div');
    var img = document.createElement('img');
    var a = document.createElement('a');
    a.innerHTML = '无题'
    div1.className = 'like_content_b_content';
    img.src = 'images/' + advertisementList[i];
    div1.appendChild(img);
    div1.appendChild(a);
    like_content_b.appendChild(div1);
}